<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data-callback="dataCallback">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增商品</el-button>
        <el-button v-auth="'export'" type="primary" :icon="Download" plain @click="downloadFile">导出订单数据</el-button>
        <!--        <el-button-->
        <!--          v-auth="'batchDelivery'"-->
        <!--          type="success"-->
        <!--          :icon="Delete"-->
        <!--          plain-->
        <!--          :disabled="!scope.isSelected"-->
        <!--          @click="batchDeliveryOrder(scope.selectedListIds)"-->
        <!--        >-->
        <!--          批量发货-->
        <!--        </el-button>-->
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">查看</el-button>
        <template v-if="scope.row.status === 1">
          <el-button type="primary" link :icon="Position" @click="deliveryOrder(scope.row)">发货</el-button>
        </template>
      </template>
    </ProTable>
    <OrderDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="tsx" name="order">
import { ref } from "vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { CirclePlus, Download, Position, View } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { Order } from "@/api/interface";
import {
  deliveryOrderAPI,
  editOrder,
  exportOrder,
  getOrderDeliveryType,
  getOrderList,
  getOrderPayType,
  getOrderStatus
} from "@/api/modules/order";
import OrderDrawer from "@/views/proTable/components/OrderDrawer.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { ElMessageBox } from "element-plus";
import { useDownload } from "@/hooks/useDownload";

const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps<Order.ResOrder>[] = [
  {
    prop: "orderNo",
    label: "订单号",
    search: { el: "input" },
    render: scope => {
      return (
        <el-button type="primary" link v-copy="scope.row.orderNo">
          {scope.row.orderNo}
        </el-button>
      );
    }
  },
  {
    prop: "status",
    label: "订单状态",
    enum: getOrderStatus,
    search: { el: "select", props: { filterable: true } },
    fieldNames: { label: "label", value: "value" }
  },
  {
    prop: "buyer",
    label: "买家",
    search: { el: "input" }
  },
  {
    prop: "amount",
    label: "金额"
  },
  {
    prop: "payType",
    label: "支付方式",
    enum: getOrderPayType,
    search: { el: "select", props: { filterable: true } },
    fieldNames: { label: "label", value: "value" }
  },
  {
    prop: "deliveryType",
    label: "送货方式",
    enum: getOrderDeliveryType,
    search: { el: "select", props: { filterable: true } },
    fieldNames: { label: "label", value: "value" }
  },
  {
    prop: "receiver",
    label: "收货人"
  },
  {
    prop: "address",
    label: "收货地址"
  },
  { prop: "createTime", label: "下单时间" },
  { prop: "operation", label: "操作", width: 165, fixed: "right" }
];

const dataCallback = (data: any) => {
  console.log(data);
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getOrderList(newParams);
};

const deliveryOrder = async (params: Order.ResOrder) => {
  await useHandleData(deliveryOrderAPI, { id: [params.id] }, `发货【${params.orderNo}】`);
  proTable.value?.getTableList();
};

const downloadFile = async () => {
  ElMessageBox.confirm("确认导出订单数据数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(exportOrder, "订单列表", proTable.value?.searchParam)
  );
};

// const batchDeliveryOrder = async (id: string[]) => {
//   await useHandleData(deliveryOrderAPI, { id }, `发货所选订单`);
//   proTable.value?.getTableList();
// };

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof OrderDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Order.ResOrder> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "编辑" ? editOrder : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
